<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	</head>
	<body>
<!-- 头部 -->
	<header></header>
<!-- 右侧边栏 -->
	<aside></aside>
<!-- 中间部分 -->
<div id="main">
	<div id="main-center">
		<div id="main-center-right">
			<div id="main-center-right-top">
				会员登录
				<a href="register.html">立即注册成为会员»</a>
			</div>
			<div id="main-center-right-bottom">
				<form action="" method="post">
					<label>账号</label>
					<input type="text" name="" id="username" value="" placeholder="手机号/邮箱/用户名" required="true"/><br>
					<label>密码</label>
					<input type="text" name="" id="userpass" value="" placeholder="登录密码" required="true"/><br>
					<div id="main-center-right-bottom-yz">
						<label>验证码</label>
						<input type="text" id="text" placeholder="验证码">
						<canvas id="canvas" width="120" height="34"></canvas>
						<button type="button" id="code">更换验证码</button>
					</div>
					<div id="main-center-right-bottom-dl">
						<input type="checkbox" name="" id="check" value="" />自动登录
						<a href="">忘记密码</a>
					</div>
					<button type="button" id="btnLogin">登录</button>
				</form>
				<div id="inform"></div>
			</div>
		</div>
	</div>
</div>
<!-- 底部 -->
	<footer></footer>
	</body>
</html>
<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cookieTools.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$("header").load("head.html");
	$("footer").load("footer.html");
	// 右引入侧边栏
	$("aside").load("sidebar.html");
		var ocode = document.getElementById("code")
	    var canvas = document.getElementById("canvas");//演员
	    var context = canvas.getContext("2d");//舞台，getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
	    var button = document.getElementById("btnLogin");//获取按钮
	    var input = document.getElementById("text");//获取输入框
	    draw();
	    ocode.onclick = function () {
	        context.clearRect(0, 0, 120, 34);//在给定的矩形内清除指定的像素
	        draw();
	    }
	    // 随机颜色函数
	    function getColor() {
	        var r = Math.floor(Math.random() * 256);
	        var g = Math.floor(Math.random() * 256);
	        var b = Math.floor(Math.random() * 256);
	        return "rgb(" + r + "," + g + "," + b + ")";
	    }
	    function draw() {
	        context.strokeRect(0, 0, 120, 34);//绘制矩形（无填充）
	        var aCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
	        // 绘制字母
	        var arr = [] //定义一个数组用来接收产生的随机数
	        var num //定义容器接收验证码
	        for (var i = 0; i < 4; i++) {
	            var x = 20 + i * 20;//每个字母之间间隔20
	            var y = 20 + 5 * Math.random();//y轴方向位置为20-30随机
	            var index = Math.floor(Math.random() * aCode.length);//随机索引值
	            var txt = aCode[index];
	            context.font = "bold 20px 微软雅黑";//设置或返回文本内容的当前字体属性
	            context.fillStyle=getColor();//设置或返回用于填充绘画的颜色、渐变或模式，随机
	            context.translate(x,y);//重新映射画布上的 (0,0) 位置，字母不可以旋转移动，所以移动容器
	            var deg=90*Math.random()*Math.PI/180;//0-90度随机旋转
	            context.rotate(deg);// 	旋转当前绘图
	            context.fillText(txt, 0, 0);//在画布上绘制“被填充的”文本
	            context.rotate(-deg);//将画布旋转回初始状态
	            context.translate(-x,-y);//将画布移动回初始状态
	            arr[i] = txt //接收产生的随机数
	        }
	        num = arr[0] + arr[1] + arr[2] + arr[3] //将产生的验证码放入num
	        // 绘制干扰线条
	        for (var i = 0; i < 8; i++) {
	            context.beginPath();//起始一条路径，或重置当前路径
	            context.moveTo(Math.random() * 120, Math.random() * 35);//把路径移动到画布中的随机点，不创建线条
	            context.lineTo(Math.random() * 120, Math.random() * 35);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
	            context.strokeStyle=getColor();//随机线条颜色
	            context.stroke();// 	绘制已定义的路径
	        }
	        // 绘制干扰点，和上述步骤一样，此处用长度为1的线代替点
	        for (var i = 0; i < 20; i++) {
	            context.beginPath();
	            var x = Math.random() * 120;
	            var y = Math.random() * 34;
	            context.moveTo(x, y);
	            context.lineTo(x + 1, y + 1);
	            context.strokeStyle=getColor();
	            context.stroke();
	        }
	        //点击按钮验证
	        button.onclick = function () { 
	        var text = input.value //获取输入框的值
	        if (text === num) {
					$.ajax({
							url:"./php/login.php",
							type:"post",
							data:{
								"username":$("#username").val(),
								"userpass":$("#userpass").val(),
							},
							success:function(resText){
								if(resText=="success"){
									if($("#check").prop('checked')==true){
										saveCookie("username",$("#username").val(),7);
										window.location.href='index.html';
									}else{
										saveCookie("username",$("#username").val());
										window.location.href='index.html';
									}
									window.location.href='index.html';
								}else if(resText=="fail"){
									$("#inform").html('账号/密码错误');
								}
							},
					});
	        } else {
				if($("#username").html() ==''){
					$("#inform").html('请输入账号');
				}else if($("#userpass").html() ==''){
					$("#inform").html('请输入密码');
				}else{
					$("#inform").html('验证码错误');
				}
	        }
			if($("#inform").html()!=""){
				$("#inform").css({
					display:"block"
				})
				setTimeout(function(){
					$("#inform").css({
						display:"none"
					})
				},4000)
			}else{
				$("#inform").css({
					display:"none"
				})
			}
	      }    
	}
</script>